<style rel="styleesheet" lang="less">
@media screen and (min-width: 829px) {
  .trainingInfo {
    background-color: #F6F7FB;
    overflow: hidden;
    width: 100%;
    .active {
      color: #F37D0A
    }
    .btn-box,
    .type {
      display: none
    }
    .wrapTraining {
      /*border: 1px solid blue;*/
      width: 80%;
      height: 100%;
      margin: 0 auto;
      /*background-color:#FBFBFE;*/
      .kind {
        margin-top: 3.5rem;
        margin-bottom: 1rem;
        height: 2.43rem;
        ul {
          position: relative;
        }
        ul li {
          float: left;
          font-size: 1.57rem;
          cursor: pointer;
          margin-right: 3.5rem;
        }
        ul li:last-child {
          margin-right: 0
        }
        ul .active {
          color: #F37D0A;
        }
      }

      .search {
        margin-top: 3.5rem;
        margin-bottom: 1rem;
        height: 2.43rem;
        position: relative;
        .searchBox {
          float: right;
          width: 20.71rem;
          height: 2.43rem;
          background: rgba(255, 255, 255, 1);
          border: 1px solid #CCCCCC;
          border-radius: 1.14rem;
          padding-left: 15px;
        }
        .searchLogo {
          font-size: 1.5rem;
          cursor: pointer;
          position: absolute;
          right: 0.5rem;
          top: 0.5rem;
        }
      }

      .content li {
        clear: both;
        width: 100%;
        /*border-bottom: 1px solid #F3A40A;*/
        border-radius: 0.43rem;
        margin-top: 3.43rem;
        background-color: white;
        .liWrap {
          position: relative;
          border-bottom: solid 1px #ccc;
          margin: 0 2.2rem;
          padding-bottom: 2rem;
          .title {
            margin-top: 2.79rem;
            font-size: 1.43rem;
            
            color: rgba(51, 51, 51, 1);
            line-height: 1.43rem;
          }
          .leader {
            margin-top: 2.07rem;
          }
          p {
            margin-top: 0.9rem;
            color: #666666;
            font-size: 1rem;
            
            color: rgba(153, 153, 153, 1);
          }
          .apply img {
            position: absolute;
            bottom: 2rem;
            right: 6.14rem;
            padding: 0;
          }
          .apply span {
            position: absolute;
            bottom: 2rem;
            right: 3rem;
            color: #ec9f0a
          }
          .applyWord {
            position: absolute;
            bottom: 2rem;
            right: 3.21rem;
          }
        }
      }
      .ing {
        border-top: 5px solid #F3A40A;
      }
      .over {
        border-top: 5px solid #CCCCCC;
      }
    }
    .file-box {
      background-color: #fff;
      text-align: center;
      min-height: 30rem;
      margin-bottom: 2rem;
      img {
        width: 44rem;
      }
    }
    #sign_v {
      display: none;
    }
    .file-box img {
      box-sizing: border-box !important;
      padding: 0 15% !important;
      width: 100% !important;
      height: initial !important;
    }
  }
}

@media screen and (max-width: 829px) {
  .trainingInfo {
    background-color: #F6F7FB;
    height: 100%;
    * {
      box-sizing: border-box;
    }
    .content {
      width: 100%;
      clear: both;
    }
    .kind {
      font-size: 0.28rem;
      font-weight: bold;
      background-color: #FFFFFF;
      padding-left: 0.3rem;
      margin-bottom: 0.16rem;
      li {
        display: inline-block;
        margin-right: 0.5rem;
        color: #3E3A39;
        line-height: 1.05rem;
      }
      li:last-child {
        margin-right: 0
      }
      li.active {
        color: #FD9D40
      }
    }
    .search {
      background-color: #FFFFFF;
      height: 1.05rem;
      line-height: 1.05rem;
      text-align: center;
      .searchBox {
        display: none
      }
      .icon-search {
        font-size: 0.5rem;
      }
    }
    .ing,
    .over {
      background-color: #fff;
      margin-bottom: 0.16rem;
      padding: 0 0.32rem;
      position: relative;
      .title {
        font-size: 0.32rem;
        padding: 0.5rem 0;
        font-weight: bold;
      }
      p {
        font-size: 0.26rem;
        color: #888;
        padding: 0.1rem 0;
        span {
          display: inline-block;
          width: 75%;
          vertical-align: top;
        }
      }
    }
    .apply {
      display: none
    }
    .btn-box {
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 0.1rem 0.3rem;
      background: #fff;
      box-shadow: 0 0 35px 0px rgba(0, 0, 0, 0.1);
    }
    #sign {
      display: none;
    }
    #sign_v {
      width: 100%;
      line-height: 0.9rem;
      font-size: 0.32rem;
      vertical-align: top;
      background-color: #FD9D40;
    }
    .file-box {
      img {
        width: 100%;
        display: block;
      }
    }
  }
}

</style>
<template>
  <div class="trainingInfo" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="wrapTraining">
      <el-row>
        <ul class="content">
          <li :class="trainingInfo.State!=1?'over':'ing'">
            <div class="liWrap">
              <h3 class="title">{{trainingInfo.Name}}</h3>
              <p class="leader">主&nbsp;&nbsp;讲&nbsp;人：<span>{{trainingInfo.TeachersName}}</span></p>
              <p>培训地点：<span>{{trainingInfo.Address}}</span></p>
              <p>培训对象：<span>{{trainingInfo.Target}}</span></p>
              <p>培训人数：<span>{{trainingInfo.Number}}</span></p>
              <p>培训时间：<span>{{$bw.format(trainingInfo.StartTime,'date')}}</span></p>
              <p>报名截止：<span>{{$bw.format(trainingInfo.DeadLineTime,'dateTime')}}</span></p>
              <div class="apply">
                <img src="../../static/img/报名.png" alt="" style="cursor: pointer" v-show="trainingInfo.State==1" @click="apply">
                <span style="cursor: pointer" @click="apply" v-show="trainingInfo.State==1">报名</span>
                <!--<img src="../../static/img/已结束.png" alt="" v-show="trainingInfo.State!=1">-->
                <!--<img src="../../static/img/报名中.png" alt="" v-show="trainingInfo.State==1" style="cursor: pointer" @click="apply">-->
                <img src="../../static/img/已结束.png" alt="" v-show="trainingInfo.State==4">
                <img src="../../static/img/报名结束.png" alt="" v-show="trainingInfo.State==2">
                <img src="../../static/img/未开始.png" alt="" v-show="trainingInfo.State==0">
                <img src="../../static/img/进行中.png" alt="" v-show="trainingInfo.State==3">
              </div>
              <div class="btn-box">
                <span id="sign" class="bw-btn bw-btn-warning" v-show="trainingInfo.State==1" @click="apply">报名</span>
                <span id="sign_v" class="bw-btn bw-btn-warning" v-show="trainingInfo.State==1" @click="apply">报名</span>
              </div>
            </div>
            <div class="file-box" v-html="trainingInfo.Introduce">
            </div>
          </li>
        </ul>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: "",
      num: 1,
      fullscreenLoading: false,
      PageSize: 10,
      trainingInfo: {},
      userInfo: {}
    }
  },
  components: {

  },
  methods: {
    //    routerGo(url) {
    //      this.$router.push(url)
    //    },
    apply() {
      if (!this.userInfo.AccessToken) {
        this.$message({ message: '请先登录', type: 'error' });
      } else {
        this.$router.push({ path: '/trainingTrainingApply', query: { trainId: this.trainingInfo.TrainId } })
      }
    },
    active(index) {
      this.num = index
    },
    getList() {
      let trainId = this.$route.query.trainId
      this.$service('/api/TrainClass/GetModel?trainId=' + trainId, 'get', {}).then((response) => {
          this.fullscreenLoading = false;
          this.trainingInfo = response.Data
        })
        .catch(err => {
          this.fullscreenLoading = false;
        })
    }
  },
  props: ['rootInfo'],
  mounted() {
    this.getList();
    if (document.body.offsetWidth || window.screen.width < 829) {
      this.rootInfo.showFooter = false;
    } else {
      this.rootInfo.showFooter = true;
    }
    if (this.$bw.getStorage("userInfo")) {
      this.userInfo = this.$bw.getStorage("userInfo");
    }
  },
}

</script>
